import React from "react";
import { allStore } from "../../../store/AllStore";
import { Button, Dropdown, Menu } from "antd";
export class ProductTop extends React.Component {
  Jump = (id) => {
    const element = document.getElementById(id);
    if (!element) {
      return;
    }
    const rect = element.getBoundingClientRect();
    if (rect.top) {
      window.scrollTo({
        top: rect.top + window.scrollY - 70,
        behavior: "smooth",
      });
    }
  };
  getMenuItem = (rmenu) => {
    return (
      <Menu>
        {rmenu.map((item, index) => {
          return (
            <Menu.Item key={index}>
              <div className="pcd-menu-i" onClick={() => this.Jump(item.id)}>
                {item.name}
              </div>
            </Menu.Item>
          );
        })}
      </Menu>
    );
  };
  render() {
    const rmenu = [
      {
        name: allStore.isEnglish ? "Castable material" : "可浇注材料",
        id: "castable-material",
      },
      {
        name: allStore.isEnglish ? "Ceramic fiber blanket" : "陶瓷纤维毡",
        id: "ceramic-fiber-blanket",
      },
      {
        name: allStore.isEnglish
          ? "High alumina refractory bricks"
          : "高铝耐火砖",
        id: "high-alumina-refractory-bricks",
      },
      {
        name: allStore.isEnglish
          ? "Irregular refractory bricks"
          : "不规则耐火砖",
        id: "irregular-refractory-bricks",
      },
      {
        name: allStore.isEnglish ? "Mullite Insulating bricks" : "莫来石隔热砖",
        id: "mullite-insulating-bricks",
      },
      {
        name: allStore.isEnglish ? "Rock wool board" : "石棉板",
        id: "rock-rool-board",
      },
      {
        name: allStore.isEnglish ? "Standard refractory bricks" : "标准耐火砖",
        id: "standard-refractory-bricks",
      },
    ];
    return (
      <>
        <div className="pcd-top">
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              marginBottom: 64,
              color: "#fff",
            }}
          >
            <div style={{ fontSize: 48, fontWeight: 600 }}>
              {allStore.isEnglish ? "Product Introduction" : "产品介绍"}
            </div>
            <div
              style={{
                fontSize: allStore.isEnglish?14:18,
                fontWeight: 500,
                marginTop: 12,
                width: 760,
                textAlign: "center",
              }}
            >
              {allStore.isEnglish
                ? "The company's main business includes refractory materials such as clay refractory bricks, insulation bricks, fireproof cotton, and steel materials such as round steel and special steel."
                : "公司主营业务包括粘土耐火砖、保温砖、防火棉等耐火材料，圆钢、特钢等钢铁材料。"}
            </div>
            <Button
              onClick={() => this.Jump("pcd-navigation")}
              style={{
                marginTop: 24,
                width: 140,
                height: 50,
                fontSize: 16,
                borderRadius: 8,
                fontWeight: 600,
              }}
            >
              {allStore.isEnglish ? "READ MORE" : "了解更多"}
            </Button>
          </div>
        </div>
        <div
          id="pcd-navigation"
          style={{
            height: 120,
            borderBottom: "2px solid #e8e8e8",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              width: 600,
            }}
          >
            <Dropdown
              overlay={() => this.getMenuItem(rmenu)}
              placement="bottomLeft"
            >
              <Button
                onClick={() => this.Jump("pd1")}
                style={{
                  backgroundColor: "#030852",
                  color: "#fff",
                  height: 50,
                  width: 200,
                  fontSize: 20,
                }}
              >
                {allStore.isEnglish ? "Refractory material" : "耐火材料"}
              </Button>
            </Dropdown>
            <Dropdown
              overlay={() => this.getMenuItem([])}
              placement="bottomLeft"
            >
              <Button
                onClick={() => this.Jump("pd2")}
                style={{
                  backgroundColor: "#030852",
                  color: "#fff",
                  height: 50,
                  width: 200,
                  fontSize: 20,
                }}
              >
                {allStore.isEnglish ? "Ferrous material" : "钢铁材料"}
              </Button>
            </Dropdown>
          </div>
        </div>
      </>
    );
  }
}
